<template>
<h1>杨硕El_表格组件</h1>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="编号" type="index" width="80"/>
    <el-table-column prop="data" label="日期" width="180"/>
      <el-table-column prop="name" label="名字" width="180"/>
    <el-table-column prop="address" label="地址"/>
  </el-table>
  <el-table :data="table" style="width: 600px;margin: 0 auto;">
    <el-table-column prop="id" type="index" width="80" align="center"/>
    <el-table-column label="名字" prop="name" align="center"/>
    <el-table-column label="工资" prop="salary" align="center"/>
    <el-table-column label="职位" prop="job" align="center"/>
    <el-table-column label="操作" align="center">
    <template #default="scope">
<!--  添加删除按钮，点击 删除当前行   -->
<!--   template：表示自定义的列，如果想要在表格中嵌入其他组件，必须写在此template中！  -->
<!--   #default 代表插槽slot，能让我们将其它组件嵌入到表格里   -->
<!--   scope对象用来保存表格的上下文数据
        scope.row就代表当前行对象，比如我们是一张用户，一行就代表一个UserVO，
        scope.$index代表当前索引，从零开始！-->
      <el-button type="danger" @click="del(scope.$index)">删除</el-button>
    </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
//定义响应式数组用来保存多个员工
import {ref} from "vue";

const tableData=[
  {
    data:'2025-5-6'
    ,name:'杨硕'
    ,address:'上海'
  },
  {
    data:'2025-5-6'
    ,name:'杨硕'
    ,address:'上海'
  },
  {
    data:'2025-5-6'
    ,name:'杨硕'
    ,address:'上海'
  },
  {
    data:'2025-5-6'
    ,name:'杨硕'
    ,address:'上海'
  }
]
const table=ref([
    {
      name:'杨硕一号',
      salary:1000,
      job:'饲养员'
    },
  {
    name:'杨硕二号',
    salary:2000,
    job:'护林员'
  },
    {
      name:'杨硕三号',
      salary:3000,
      job:'销售员'
    },
    {
      id:4,
      name:'杨硕四号',
      salary:4000,
      job:'程序员'
    },
]);
const del = (emp,index) =>{
  if(confirm("你忍心删除吗？"+emp.name+'??')){
    table.value.splice(index,1);
  }
}
</script>


<style scoped>

</style>